<template>
    <div id="newGame">
        <el-tabs type="border-card">
             <el-row>
                <el-col :xs="24" :sm="24" :md="24" class="date-search">
                        <el-date-picker
                        v-model="date"
                        type="daterange" 
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                </el-col>
            </el-row>
            <el-table
                :data="tableData"
                @cell-click="gameClick"
                style="width: 100%">
                <el-table-column
                prop="game"
                label="游戏名">
                </el-table-column>

                <el-table-column
                prop="num"
                label="渠道数量">
                </el-table-column>

                <el-table-column
                prop="accout"
                label="活跃账号">
                </el-table-column>

                <el-table-column
                prop="device"
                label="活跃设备">
                </el-table-column>

                <el-table-column
                prop="man"
                label="付费人数">
                </el-table-column>

                <el-table-column
                prop="total"
                label="付费总金额">
                </el-table-column>
            </el-table>
             <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                    :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div id="chart">
                 <el-col :xs="24" :sm="24" :md="12" >
                    <div id="myChart_1"></div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" >
                    <ul class="tab f-cb">
                        <li v-for="(item,index) in tab" :key="index" :class="{'active':index==activeTab}" @click="handleClick(index)">
                            {{item.name}}
                        </li>
                    </ul>
                    <div id="myChart_2"></div>
                </el-col>
            </div>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                date:'',
                saveDate:'',
                activeTab:0,
                tab:[{name:'渠道数量'},{name:'活跃账号'},{name:'活跃设备'},{name:'付费人数'},{name:'总付费金额'}],
                listQuery: {
                    page: 1,
                    limit: 10
                },
                total: 0,
                tableData: [
                    {
                        id:1,
                        game:"大话仙游",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    },
                    {
                        id:2,
                        game:"大话仙游",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    },
                    {
                        id:3,
                        game:"大话仙游",
                        num:12,
                        accout:25,
                        device:23,
                        man:7,
                        total:100
                    }
                ]
            }
        },
        mounted(){
            this.drawColum();
            this.drawLine();
        },
        methods:{
            drawColum(){
                // 基于准备好的dom，初始化echarts实例
                let myChart_1 = this.$echarts.init(document.getElementById('myChart_1'))
                // 绘制图表
                myChart_1.setOption({
                    title: { text: '渠道付费排行榜' },
                    tooltip: {},
                    xAxis: {
                        data: ["小皮网络","tysis","bjo8","游戏天空","张照程","byh0686"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20],
                            itemStyle:{
                                normal:{
                                    label:{
                                        show:true,
                                        position:'top',
                                        textStyle:{
                                            color:'#999'
                                        }
                                    }
                                }
                            }
                        },
                        
                    ]
                });
            },
            drawLine(){
                let myChart_2 = this.$echarts.init(document.getElementById('myChart_2'));
                myChart_2.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['2018-10-27','2018-10-28','2018-10-29','2018-10-30','2018-10-31','2018-11-1','2018-11-2','2018-11-3'],

                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '新增用户',
                            min: 1500,
                            max: 8500,
                            interval: 1000,
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    grid:{
                        x:80
                    },
                    series: [
                        {
                            name:'新增用户',
                            type:'line',
                            data:[3000, 1800, 4505, 5000, 3600, 6000, 2999, 8000],
                            itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'#2196f3'
                                    },
                                    color:"#2196f3"
                                }
                            },
                        }
                    ]
                })
            },
            handleClick(index){
                this.activeTab=index;
            },
            search(){
               if(!this.date){
                   this.date="";
               }
               this.saveDate=this.date;
               this.getList();
           },
            handleSizeChange(val) {
                this.listQuery.limit = val
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
            },
            gameClick(row,column,cell, event){
                console.log(row)
                console.log(column)
                console.log(cell)
            }
        }
    }
</script>

<style scoped lang="scss">
.date-search{
    margin-bottom:20px;
    text-align: left;
}
#chart{
    margin-top:50px;
}
#myChart_1,#myChart_2{
    height:400px;
}
.tab{
    li{
        float: left;
        padding:0  1rem;
        font-size:14px;
        line-height:30px;
        border:1px solid #ddd;
        border-right:0;
        cursor: pointer;
        &.active{
            color:#409EFF;
        }
        &:last-child{
            border-right:1px solid #ddd;
        }
    }
}
</style>